<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="region-stats-header">
          <el-card shadow="hover" v-for="(region, index) in regionSummary" :key="index" class="region-summary-card">
            <div class="region-title">{{ region.name }}</div>
            <div class="region-subtitle">机场总数</div>
            <div class="region-count">{{ region.airports }}</div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="main-content">
      <el-col :span="5">
        <el-card shadow="hover" class="query-panel">
          <template #header>
            <div class="card-header">
              <span>查询条件</span>
            </div>
          </template>
          <el-form :model="queryForm" label-width="80px">
            <el-form-item label="地区">
              <el-select v-model="queryForm.region" placeholder="请选择地区" class="w-100">
                <el-option label="全部" value="all" />
                <el-option label="台北地区" value="taipei" />
                <el-option label="台中地区" value="taichung" />
                <el-option label="台南地区" value="tainan" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="能力">
              <el-select v-model="queryForm.capability" placeholder="请选择能力" class="w-100">
                <el-option label="全部" value="all" />
                <el-option label="跑道" value="runways" />
                <el-option label="停机坪" value="parking-aprons" />
                <el-option label="油料设施" value="oil-tanks" />
                <el-option label="弹药库" value="ammunition-depots" />
              </el-select>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="handleQuery" class="w-100">查询</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      
      <el-col :span="13">
        <div class="card h-100">
          <div class="card-header">
            <h5 class="mb-0">台湾机场地图</h5>
          </div>
          <div class="card-body p-0">
            <div class="map-container">
              <div id="taiwan-map" style="height: 100%;"></div>
              <!-- 加载指示器 -->
              <div v-if="loading" class="loading-overlay">
                <div class="spinner"></div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="info-panel">
          <template #header>
            <div class="card-header">
              <span>机场列表</span>
              <span v-if="selectedRegion" class="region-tag">{{ selectedRegion }}</span>
            </div>
          </template>
          <div v-if="filteredAirportData.length === 0" class="empty-data">
            暂无符合条件的机场
          </div>
          <div v-else class="airport-list">
            <div v-for="airport in filteredAirportData" 
                 :key="airport.id" 
                 class="airport-item"
                 :class="{ active: selectedAirport === airport.name }"
                 @click="selectAirport(airport)">
              <div class="airport-header">
                <span class="airport-name">{{ airport.name }}</span>
                <el-tag size="small" :type="getRegionTagType(airport.region)">
                  {{ getRegionName(airport.region) }}
                </el-tag>
              </div>
              <div class="facility-details">
                <el-tooltip
                  effect="dark"
                  placement="right">
                  <template #content>
                    <div>跑道: {{ airport.facilityDetails?.runways || 0 }} 条</div>
                    <div>停机坪: {{ airport.facilityDetails?.parkingAprons || 0 }} 个</div>
                    <div>油库: {{ airport.facilityDetails?.oilTanks || 0 }} 个</div>
                    <div>弹药库: {{ airport.facilityDetails?.ammunitionDepots || 0 }} 个</div>
                    <div>总设施数: {{ airport.facilitiesCount || 0 }}</div>
                </template>
                  <div class="facility-count">
                    <span>设施总数: {{ airport.facilitiesCount || 0 }}</span>
                    <el-progress 
                      :percentage="getPercentage(airport.facilitiesCount)"
                      :color="getFacilityColor(airport.facilitiesCount)"
                      :show-text="false"
                      :stroke-width="8"
                    />
          </div>
                </el-tooltip>
                <div v-if="queryForm.capability !== 'all'" class="capability-value">
                  能力值: {{ airport.capabilityValue }}
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
import { getRegionalSummary, getAirports, getAirportsWithRunways, 
         getAirportsWithParkingAprons, getAirportsWithOilTanks, 
         getAirportsWithAmmunitionDepots } from '@/api/analysis'

// Fix for the marker icon issue in Leaflet with webpack
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})

export default {
  name: 'HomeView',
  setup() {
    const queryForm = ref({
      region: 'all',
      capability: 'all'
    })
    
    const loading = ref(false)
    const selectedRegion = ref('')
    const selectedAirport = ref(null)
    let mapInstance = null
    let markersLayer = null
    let taiwanPolygon = null
    
    const regionSummary = ref([])
    const airportData = ref([])
    
    const capabilityLabels = {
      'runways': '跑道数量',
      'parking-aprons': '停机坪数量',
      'oil-tanks': '油料设施数量',
      'ammunition-depots': '弹药库数量',
      'all': '设施总数'
    }
    
    const filteredAirportData = computed(() => {
      let result = [...airportData.value]
      
      // 根据选择的地区进行筛选
      if (queryForm.value.region !== 'all') {
        result = result.filter(airport => airport.region === queryForm.value.region)
      }
      
      // 根据选择的能力类型进行筛选
      if (queryForm.value.capability !== 'all') {
        switch (queryForm.value.capability) {
          case 'runways':
            result = result.filter(airport => airport.facilityDetails?.runways > 0)
            break
          case 'parking-aprons':
            result = result.filter(airport => airport.facilityDetails?.parkingAprons > 0)
            break
          case 'oil-tanks':
            result = result.filter(airport => airport.facilityDetails?.oilTanks > 0)
            break
          case 'ammunition-depots':
            result = result.filter(airport => airport.facilityDetails?.ammunitionDepots > 0)
            break
        }
      }
      
      // 按设施总数降序排序
      result.sort((a, b) => {
        const totalA = a.facilitiesCount || 0
        const totalB = b.facilitiesCount || 0
        return totalB - totalA
      })
      
      return result
    })
    
    const regionAirports = ref({
      taipei: ['S机场', 'X机场', 'H机场', 'J机场', '原哥机场'],
      taichung: ['Q机场', '彰化', '民雄', 'Y机场', 'M机场', '麻豆'],
      tainan: ['N机场', 'G机场', 'P机场', '熊出没机场', 'D机场', 'F机场', '仁德', '佳冬']
    })
    
    // 区域边界数据
    const districtsData = {
      type: 'FeatureCollection',
      features: [
        {
      type: 'Feature',
          properties: { name: '台北区域', region: 'taipei' },
      geometry: {
        type: 'Polygon',
        coordinates: [[
              [121.45, 25.10],
              [121.65, 25.10],
              [121.65, 24.95],
              [121.45, 24.95],
              [121.45, 25.10]
            ]]
          }
        },
        {
          type: 'Feature',
          properties: { name: '台中区域', region: 'taichung' },
          geometry: {
            type: 'Polygon',
            coordinates: [[
              [120.55, 24.20],
              [120.75, 24.20],
              [120.75, 24.00],
              [120.55, 24.00],
              [120.55, 24.20]
            ]]
          }
        },
        {
          type: 'Feature',
          properties: { name: '台南区域', region: 'tainan' },
          geometry: {
            type: 'Polygon',
            coordinates: [[
              [120.15, 23.05],
              [120.35, 23.05],
              [120.35, 22.85],
              [120.15, 22.85],
              [120.15, 23.05]
            ]]
          }
        }
      ]
    }
    
    // 修改台湾地图边界GeoJSON数据为更紧凑的版本
    const taiwanGeoData = {
      type: 'Feature',
      properties: { name: 'Taiwan' },
      geometry: {
        type: 'Polygon',
        coordinates: [[
          [120.20, 23.05], // 嘉义
          [120.60, 24.05], // 台中
          [121.52, 25.02], // 台北
          [121.65, 24.85], // 宜兰
          [121.45, 23.95], // 花莲
          [120.85, 23.40], // 台东
          [120.45, 22.70], // 高雄
          [120.25, 22.95], // 台南
          [120.20, 23.05]  // 回到嘉义
        ]]
      }
    }
    
    let districtLayerGroup = null
    
    const initMap = () => {
      // 如果地图已经初始化，先销毁它
      if (mapInstance) {
        mapInstance.remove()
        mapInstance = null
      }

      const mapContainer = document.getElementById('taiwan-map')
      if (!mapContainer) {
        console.error('Map container not found')
        return
      }

      // 创建地图实例
      mapInstance = L.map('taiwan-map', {
        center: [23.7, 121.0],
        zoom: 8.5,  // 调整默认缩放级别
        zoomControl: true,
        scaleControl: true,
        minZoom: 8,
        maxZoom: 11,
        maxBounds: L.latLngBounds(
          L.latLng(22.0, 119.8),  // 西南角
          L.latLng(25.4, 122.0)   // 东北角
        )
      })
      
      // 创建并添加离线地图图层
      const offlineLayer = L.tileLayer('/assets/map-of-taiwan/gaode_map/{z}/{x}/{y}.png', {
        minZoom: 8,
        maxZoom: 11,
        tileSize: 256,
        attribution: '高德地图离线数据',
        errorTileUrl: '',
        noWrap: true,
        bounds: L.latLngBounds(
          L.latLng(20.63278, 119.53125),  // 西南角
          L.latLng(25.79989, 122.34375)   // 东北角
        ),
        tms: false,
        crossOrigin: true,
        subdomains: '',
        detectRetina: false
      })

      // 添加错误处理
      offlineLayer.on('tileerror', function(e) {
        const tileUrl = e.tile.src
        console.error('Tile error:', tileUrl)
        
        // 解析瓦片坐标
        const match = tileUrl.match(/\/(\d+)\/(\d+)\/(\d+)\.png$/)
        if (match) {
          const [_, z, x, y] = match
          console.log(`Failed to load tile at zoom ${z}, x=${x}, y=${y}`)
          
          // 检查文件是否存在
          fetch(tileUrl)
            .then(response => {
              if (!response.ok) {
                console.error(`Tile file not found: ${tileUrl}`)
                // 设置错误瓦片的背景色
                e.tile.style.backgroundColor = '#f0f0f0'
              }
            })
            .catch(error => {
              console.error(`Error checking tile: ${error}`)
              // 设置错误瓦片的背景色
              e.tile.style.backgroundColor = '#f0f0f0'
            })
        }
      })

      // 添加加载处理
      offlineLayer.on('tileload', function(e) {
        console.log('Tile loaded successfully:', e.tile.src)
      })

      // 添加图层
      offlineLayer.addTo(mapInstance)

      // 创建机场标记图层
      markersLayer = L.layerGroup().addTo(mapInstance)
      
      // 添加台湾GeoJSON边界
      if (taiwanPolygon) {
        taiwanPolygon.remove()
      }
      taiwanPolygon = L.geoJSON(taiwanGeoData, {
        style: {
          color: '#1E88E5',
          weight: 2,
          opacity: 0.6,
          fillColor: '#1E88E5',
          fillOpacity: 0.1
        }
      }).addTo(mapInstance)
      
      // 添加区域边界
      if (districtLayerGroup) {
        districtLayerGroup.remove()
      }
      districtLayerGroup = L.layerGroup()
      L.geoJSON(districtsData, {
        style: feature => {
          // 根据区域名称设置不同颜色
          let color = '#5C6BC0' // 默认颜色
          if (feature.properties.region === 'taipei') {
            color = '#5C6BC0' // 台北区域颜色
          } else if (feature.properties.region === 'taichung') {
            color = '#26A69A' // 台中区域颜色
          } else if (feature.properties.region === 'tainan') {
            color = '#FFA726' // 台南区域颜色
          }
          
          return {
            color: color,
            weight: 2,
            opacity: 0.6,
            fillColor: color,
            fillOpacity: 0.1,
            dashArray: '3'
          }
        },
        // 添加区域名称提示
        onEachFeature: (feature, layer) => {
          if (feature.properties && feature.properties.name) {
            layer.bindTooltip(feature.properties.name, {
              permanent: true,
              direction: 'center',
              className: 'district-label'
            })
          }
        }
      }).addTo(districtLayerGroup)
      districtLayerGroup.addTo(mapInstance)

      // 添加地图加载完成处理
      mapInstance.on('load', function() {
        console.log('Map loaded')
        // 输出当前地图的边界和缩放级别
        const bounds = mapInstance.getBounds()
        const zoom = mapInstance.getZoom()
        console.log('Map bounds:', bounds)
        console.log('Map zoom:', zoom)
      })

      // 添加缩放级别变化处理
      mapInstance.on('zoomend', function() {
        const zoom = mapInstance.getZoom()
        console.log('Current zoom level:', zoom)
      })

      // 添加移动结束处理
      mapInstance.on('moveend', function() {
        const center = mapInstance.getCenter()
        console.log('Map center:', center)
      })
      
      // 更新地图数据
      updateMapData()
    }
    
    // 获取海拔高度颜色
    const getElevationColor = (elevation) => {
      if (elevation > 1000) return '#8BC34A' // 高山区
      if (elevation > 500) return '#CDDC39'  // 山区
      if (elevation > 200) return '#FFF59D'  // 丘陵
      return '#FFCC80' // 平原
    }
    
    // 更新地图数据
    const updateMapData = () => {
      if (!mapInstance) return
      
      // 清除现有标记
      if (markersLayer) {
      markersLayer.clearLayers()
      }
      
      // 存储所有标记的坐标
      const bounds = []
      
      // 添加新的标记
      airportData.value.forEach(airport => {
        if (airport.latitude && airport.longitude) {
          const marker = createAirportMarker({
            name: airport.name,
            latlng: [airport.latitude, airport.longitude],
            value: airport.facilitiesCount,
            color: getRegionColor(airport.region),
            region: airport.region
          })
        markersLayer.addLayer(marker)
          bounds.push([airport.latitude, airport.longitude])
        }
      })
      
      // 调整地图视图
      if (bounds.length > 0) {
        const latLngBounds = L.latLngBounds(bounds)
        mapInstance.fitBounds(latLngBounds, {
            padding: [50, 50],
            maxZoom: 11
          })
      }
    }
    
    // 获取区域颜色
    const getRegionColor = (region) => {
      switch (region) {
        case 'taipei':
        case 'ZH':
          return '#E53935'  // 红色
        case 'taichung':
        case 'MX':
        case 'MD':
          return '#43A047'  // 绿色
        case 'tainan':
        case 'RD':
        case 'JD':
          return '#FB8C00'  // 橙色
        default:
          return '#1E88E5'  // 蓝色
      }
    }
    
    // 获取区域名称
    const getRegionName = (region) => {
      const regionMap = {
        'taipei': '台北',
        'taichung': '台中',
        'tainan': '台南'
      }
      return regionMap[region] || region
    }
    
    // 获取设施名称
    const getFacilityName = (facilityCode) => {
      const facilityNames = {
        'runways': '跑道',
        'aprons': '停机坪',
        'oilTanks': '油库',
        'ammunitionDepots': '弹药库'
      }
      return facilityNames[facilityCode] || facilityCode
    }
    
    const createAirportMarker = (airport) => {
      // 根据机场重要性调整圆形标记大小
      const radius = airport.value * 0.2 + 5
      
      // 创建圆形标记
      const marker = L.circleMarker(airport.latlng, {
        radius: radius,
        fillColor: airport.color,
        color: '#fff',
        weight: 2,
        opacity: 1,
        fillOpacity: 0.8
      })
      
      // 添加脉动动画效果
      if (airport.value >= 9) {
        // 添加脉动圈
        const pulsingCircle = L.circleMarker(airport.latlng, {
          radius: radius + 5,
          fillColor: airport.color,
          color: airport.color,
          weight: 1,
          opacity: 0.5,
          fillOpacity: 0.3,
          className: 'pulsing-circle'
        })
        markersLayer.addLayer(pulsingCircle)
      }
      
      // 构建更详细的弹出信息
      const popupContent = `
        <div class="custom-popup">
          <h3>${airport.name}</h3>
          <div class="popup-info">
            <div class="info-item">
              <span class="info-label">重要性等级:</span>
              <span class="info-value">${airport.value}</span>
            </div>
            <div class="info-item">
              <span class="info-label">区域:</span>
              <span class="info-value">${getRegionName(airport.region)}</span>
            </div>
            <div class="info-item">
              <span class="info-label">坐标:</span>
              <span class="info-value">${airport.latlng[0].toFixed(3)}, ${airport.latlng[1].toFixed(3)}</span>
            </div>
          </div>
          <button class="popup-button" onclick="document.dispatchEvent(new CustomEvent('select-airport', {detail: '${airport.name}'}))">查看详情</button>
        </div>
      `
      
      // 添加弹出信息
      marker.bindPopup(popupContent)
      
      // 添加鼠标悬停效果
      marker.on('mouseover', function() {
        this.setStyle({
          fillOpacity: 1,
          weight: 3
        })
        this.openTooltip()
      })
      
      marker.on('mouseout', function() {
        this.setStyle({
          fillOpacity: 0.8,
          weight: 2
        })
        this.closeTooltip()
      })
      
      // 添加提示信息
      marker.bindTooltip(`${airport.name}`, {
        permanent: false,
        direction: 'top',
        className: 'airport-tooltip'
      })
      
      // 添加点击事件
      marker.on('click', () => {
        // 查找该机场所在区域
        const region = Object.keys(regionAirports.value).find(key => 
          regionAirports.value[key].includes(airport.name)
        )
        
        if (region) {
          queryForm.value.region = region
          handleQuery()
        }
        
        console.log('点击了机场:', airport.name)
      })
      
      return marker
    }
    
    const fetchData = async () => {
      loading.value = true
      try {
        // 获取区域汇总数据
        const summaryData = await getRegionalSummary()
        regionSummary.value = summaryData

        // 根据所选的设施类型选择不同的API
        let airportsData
        switch (queryForm.value.capability) {
          case 'runways':
            airportsData = await getAirportsWithRunways({ region: queryForm.value.region })
            break
          case 'parking-aprons':
            airportsData = await getAirportsWithParkingAprons({ region: queryForm.value.region })
            break
          case 'oil-tanks':
            airportsData = await getAirportsWithOilTanks({ region: queryForm.value.region })
            break
          case 'ammunition-depots':
            airportsData = await getAirportsWithAmmunitionDepots({ region: queryForm.value.region })
            break
          default:
            airportsData = await getAirports({ 
              region: queryForm.value.region,
              capability: queryForm.value.capability 
            })
        }

        // 处理API返回的数据
        airportData.value = airportsData.map(airport => {
          // 确保facilityDetails存在，并获取正确的设施数量
          const facilityDetails = {
            runways: airport.facilityDetails?.runways || 0,
            parkingAprons: airport.facilityDetails?.parkingAprons || 0,
            oilTanks: airport.facilityDetails?.oilTanks || 0,
            ammunitionDepots: airport.facilityDetails?.ammunitionDepots || 0
          }

          // 计算总设施数 - 确保使用正确的数字而不是Boolean值
          const facilitiesCount = 
            Number(facilityDetails.runways) + 
            Number(facilityDetails.parkingAprons) + 
            Number(facilityDetails.oilTanks) + 
            Number(facilityDetails.ammunitionDepots)

          return {
            id: airport.id,
            name: airport.name,
            region: airport.region,
            latitude: airport.latitude,
            longitude: airport.longitude,
            facilitiesCount: facilitiesCount,
            capabilityValue: airport.capabilityValue || 0,
            facilityDetails: facilityDetails
          }
        })

        // 更新选中的地区
        selectedRegion.value = queryForm.value.region === 'all' ? '' : getRegionName(queryForm.value.region)
        
        // 更新地图上的标记
        updateMapData()
        
      } catch (error) {
        console.error('查询失败', error)
        ElMessage.error('数据获取失败，请检查后端服务是否正常运行')
        // 清空数据
        airportData.value = []
        regionSummary.value = []
      } finally {
        loading.value = false
      }
    }
    
    const handleQuery = async () => {
      loading.value = true
      try {
        await fetchData()
      } catch (error) {
        console.error('查询失败', error)
        ElMessage.error('数据获取失败，请确保服务端已启动')
        // 清空数据
        airportData.value = []
        regionSummary.value = []
      } finally {
        loading.value = false
      }
    }
    
    // 获取设施数量的百分比（用于进度条）
    const getPercentage = (count) => {
      // 假设最大设施数为20，可以根据实际情况调整
      const maxFacilities = 20
      return Math.min((count / maxFacilities) * 100, 100)
    }
    
    // 获取设施数量对应的颜色
    const getFacilityColor = (count) => {
      if (count >= 15) return '#67C23A'
      if (count >= 10) return '#E6A23C'
      if (count >= 5) return '#F56C6C'
      return '#909399'
    }

      // 根据能力值返回不同的标签类型
    const getTagType = (value) => {
      if (value > 80) return 'success'
      if (value > 50) return 'warning'
      if (value > 20) return 'info'
      return 'danger'
    }
    
    // 根据设施数量返回不同的标签类型
    const getFacilityTagType = (count) => {
      if (count >= 15) return 'success'
      if (count >= 10) return 'warning'
      if (count >= 5) return ''
      return 'info'
    }
    
    const selectAirport = (airport) => {
      selectedAirport.value = airport.name
      // 如果地图实例存在，将视图中心移动到选中的机场
      if (mapInstance && airport.latitude && airport.longitude) {
        mapInstance.setView([airport.latitude, airport.longitude], 10)
        
        // 找到对应的标记并打开弹出窗口
        if (markersLayer) {
          markersLayer.eachLayer((layer) => {
            if (layer.getLatLng && 
                layer.getLatLng().lat === airport.latitude && 
                layer.getLatLng().lng === airport.longitude) {
              layer.openPopup()
            }
          })
        }
      }
    }
    
    // 获取区域标签类型
    const getRegionTagType = (region) => {
      const typeMap = {
        'taipei': 'danger',
        'taichung': 'success',
        'tainan': 'warning'
      }
      return typeMap[region] || 'info'
    }
    
    // 监听自定义事件
    onMounted(() => {
      // 等待 DOM 完全加载
      nextTick(() => {
        initMap()
        fetchData() // 初始加载数据
      })
      
      // 添加窗口大小变化监听
      window.addEventListener('resize', () => {
        if (mapInstance) {
          mapInstance.invalidateSize()
        }
      })
      
      // 监听自定义事件
      document.addEventListener('select-airport', (event) => {
        console.log('选择了机场:', event.detail)
        // 可以在这里处理选择机场的逻辑
      })
    })
    
    onUnmounted(() => {
      // 清理地图实例和事件监听
      if (mapInstance) {
        if (markersLayer) {
          markersLayer.clearLayers()
        }
        if (taiwanPolygon) {
          taiwanPolygon.remove()
        }
        if (districtLayerGroup) {
          districtLayerGroup.remove()
        }
        mapInstance.remove()
        mapInstance = null
      }
      
      document.removeEventListener('select-airport', () => {})
    })
    
    // 监听查询表单变化，自动更新数据
    watch(queryForm, (newVal, oldVal) => {
      // 如果区域或能力类型发生变化，自动请求新数据
      if (newVal.region !== oldVal.region || newVal.capability !== oldVal.capability) {
        handleQuery()
      }
    }, { deep: true })
    
    // 添加样式
    const style = document.createElement('style')
    style.textContent = `
      .district-label {
        background: none;
        border: none;
        box-shadow: none;
        font-size: 12px;
        color: #666;
        text-shadow: 1px 1px 1px #fff;
      }
    `
    document.head.appendChild(style)
    
    return {
      queryForm,
      regionSummary,
      selectedRegion,
      selectedAirport,
      airportData,
      filteredAirportData,
      capabilityLabels,
      handleQuery,
      getTagType,
      getRegionTagType,
      selectAirport,
      loading,
      getPercentage,
      getFacilityColor,
      getRegionName,
      getFacilityTagType,
    }
  }
}
</script>

<style>
.home-container {
  padding: 1rem;
  background-color: #f5f5f5;
}

.region-stats-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.region-summary-card {
  flex: 1;
  margin: 0 10px;
  text-align: center;
  padding: 10px;
}

.region-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.region-subtitle {
  font-size: 1rem;
  margin-bottom: 10px;
}

.region-count {
  font-size: 2rem;
  font-weight: bold;
  color: #409EFF;
}

.main-content {
  margin-top: 20px;
}

.map-card {
  height: 600px;
}

.map-container {
  height: 600px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#taiwan-map {
  height: 100%;
  width: 100%;
  z-index: 1;
}

.marker-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.airport-marker {
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

.airport-marker:hover {
  transform: scale(1.2);
}

.airport-popup {
  padding: 5px;
}

.airport-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.airport-region {
  color: #666;
  margin-bottom: 5px;
}

.facilities-container {
  margin-top: 8px;
}

.airport-facilities-list {
  padding-left: 20px;
  margin-top: 5px;
  margin-bottom: 0;
}

.facility-item {
  margin-bottom: 3px;
}

.info-panel {
  background-color: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
}

.region-badge {
  display: inline-block;
  border-radius: 16px;
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #e1f5fe;
  color: #0288d1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.region-badge:hover {
  background-color: #b3e5fc;
}

.region-badge.active {
  background-color: #0288d1;
  color: white;
}

.legend-card {
  background-color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
}

.legend-color-box {
  width: 16px;
  height: 4px;
  margin-right: 8px;
}

.marker-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}

.marker-icon-airport {
  background-color: #E53935;
  border: 2px solid white;
}

.marker-icon-elevation {
  background-color: #43A047;
  border: 1px solid white;
}

.district-label {
  background: none;
  border: none;
  box-shadow: none;
  font-size: 12px;
  color: #666;
  text-shadow: 1px 1px 1px #fff;
}

/* 加载指示器 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 123, 255, 0.2);
  border-radius: 50%;
  border-top-color: #007bff;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .map-container {
    height: 400px;
  }
  
  .district-label {
    font-size: 0.9rem;
  }
}

.facility-details {
  padding: 4px 0;
}

.facility-count {
  display: flex;
  align-items: center;
  gap: 8px;
}

.total-count {
  font-size: 16px;
  font-weight: bold;
  min-width: 24px;
}

.el-progress {
  margin-left: 8px;
  flex-grow: 1;
}

/* 自定义 tooltip 样式 */
.el-tooltip__popper {
  min-width: 150px;
}

.el-tooltip__popper div {
  line-height: 1.5;
  margin: 4px 0;
}

.airport-list-panel {
  margin-top: 20px;
  max-height: calc(100vh - 500px);
  overflow-y: auto;
}

.airport-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.airport-item {
  padding: 10px;
  border-radius: 4px;
  background-color: #f5f7fa;
  cursor: pointer;
  transition: all 0.3s ease;
}

.airport-item:hover {
  background-color: #e6f1fc;
}

.airport-item.active {
  background-color: #ecf5ff;
  border-left: 3px solid #409EFF;
}

.airport-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.airport-facilities {
  display: flex;
  gap: 5px;
}

.region-details {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
  text-align: left;
}

.region-details div {
  margin: 2px 0;
}

.w-100 {
  width: 100%;
}

.region-tag {
  margin-left: 8px;
  font-size: 12px;
  color: #909399;
}

.airport-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.airport-name-cell .el-tag {
  margin-left: 4px;
  font-size: 11px;
  height: 20px;
  line-height: 18px;
  padding: 0 4px;
}

.empty-data {
  padding: 40px 0;
  text-align: center;
}

.info-panel .el-table {
  margin-top: 10px;
}

.info-panel .el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

.info-panel .el-table__row {
  cursor: pointer;
  transition: background-color 0.3s;
}

.info-panel .el-table__row:hover {
  background-color: #f0f7ff !important;
}

.airport-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

.airport-item {
  background-color: #f5f7fa;
  border-radius: 6px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.airport-item:hover {
  background-color: #ecf5ff;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.airport-item.active {
  background-color: #e6f1fc;
  border-left: 3px solid #409EFF;
}

.airport-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.airport-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.facility-count {
  margin-top: 8px;
}

.facility-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.total-count {
  font-size: 13px;
  color: #606266;
}

.capability-value {
  margin-top: 8px;
}

.airport-facilities {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.el-progress {
  margin-top: 4px;
}

.region-tag {
  font-size: 12px;
  color: #909399;
  margin-left: 8px;
}

.card-header {
  display: flex;
  align-items: center;
}

/* 自定义滚动条样式 */
.airport-list::-webkit-scrollbar {
  width: 6px;
}

.airport-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.airport-list::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.airport-list::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

.info-panel {
  height: calc(100vh - 120px);
  overflow-y: auto;
}

.airport-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.airport-item {
  padding: 12px;
  border-radius: 4px;
  background: #f5f7fa;
  cursor: pointer;
  transition: all 0.3s;
  border-left: 3px solid transparent;
}

.airport-item:hover {
  background: #ecf5ff;
  transform: translateY(-2px);
}

.airport-item.active {
  border-left-color: var(--el-color-primary);
  background: #ecf5ff;
}

.airport-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.airport-name {
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.facility-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.facility-count {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.capability-value {
  color: var(--el-text-color-secondary);
  font-size: 13px;
}

.empty-data {
  text-align: center;
  color: var(--el-text-color-secondary);
  padding: 20px;
}
</style> 